<template>
    <div class="box">
        <div class="left">
            <div class="shadow">
                <div class="tool">
                    <span class="el-icon-rank"></span>
                    <span class="el-icon-delete-solid"></span>
                </div>
                <div class="number"><span class="red" v-if="mustchecked">*</span>1</div>
                <div class="content">
                    <p v-html="title"></p>
                    <div v-for="(item, index) in list" :key="index" class="item">
                        <div class="hover_box">
                            <el-checkbox v-model="item.default">{{item.text}}</el-checkbox>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="foot_tool">
                    <quill-editor
                        v-model="title"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                    </quill-editor>
                    <div class="mustchecked"><el-checkbox v-model="mustchecked">必答</el-checkbox></div>
                    <ul class="head_ul">
                        <li style="width: 40%;">选项文字</li>
                        <li style="width: 10%;">图片</li>
                        <li style="width: 10%;">默认</li>
                        <li style="width: 40%;">上移下移</li>
                    </ul>
                    <div class="clear"></div>
                    <ul class="item_ul"  v-for="(item, index) in list" :key="index">
                        <li  style="width: 40%;">
                            <el-input
                                    type="text"
                                    size="small"
                                    placeholder="请输入内容"
                                    v-model="item.text"
                                    style="width: 80%"
                                >
                                </el-input>
                                <span class="el-icon-circle-plus-outline sm_icon" @click="add(index)"></span>
                                <span class="el-icon-remove-outline sm_icon"  @click="delItem(index)"></span>
                        </li>
                        <li style="width: 10%;">
                            <span class="el-icon-picture-outline sm_icon"></span>
                        </li>
                        <li style="width: 10%;">
                            <el-checkbox v-model="item.default"></el-checkbox>
                        </li>
                        <li style="width: 40%;">
                            <span class="el-icon-top sm_icon border" @click="up(item, index)"></span>
                            <span class="el-icon-bottom sm_icon border" @click="down(item, index)"></span>
                        </li>
                        <div class="clear"></div>
                    </ul>
                    <div class="clear"></div>
                    <div @click="add" class="add_single"><span class="el-icon-plus"></span>添加单个选项</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'multiplechoose',
  data() {
    return {
      title: '请输入标题',
      mustchecked: true,
      list: [
        {
          id: 1,
          text: '选项1',
          default: false,
        },
        {
          id: 2,
          text: '选项2',
          default: false,
        },
      ],
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  methods: {
    add(index) {
      if (index >= 0) {
        this.list.splice(index + 1, 0, {
          id: this.list[this.list.length - 1].id + 1,
          // text: '选项' + (this.list.length + 1),
          text: `选项${((this.list[this.list.length - 1].id) + 1)}`,
          default: false,
        });
      } else {
        this.list.push({
          id: this.list[this.list.length - 1].id + 1,
          // text: '选项' + (this.list.length + 1),
          text: `选项${((this.list[this.list.length - 1].id) + 1)}`,
          default: false,
        });
      }
    },
    delItem(index) {
      this.list.splice(index, 1);
    },
    up(item, index) {
      if (index !== 0) {
        this.list[index] = this.list.splice(index - 1, 1, this.list[index])[0];
      } else {
        this.list.push(this.list.shift());
      }
    },
    down(item, index) {
      if (index !== this.list.length - 1) {
        this.list[index] = this.list.splice(index + 1, 1, this.list[index])[0];
      } else {
        this.list.unshift(this.list.splice(index, 1)[0]);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.box{
    width: 100%;
    height: 100vh;
    background: #eee;
    .left{
        padding-top: 20px;
        width: 100%;
        height: 100%;
        .shadow{
            position: relative;
            margin: 0 auto;
            width: 1000px;
            .tool{
                position: absolute;
                top: 15px;
                right: 10px;
                color: #666;
                span{
                    font-size: 20px;
                    display: inline-block;
                    margin: 0 10px;
                }
            }
            .number{
                float: left;
                width: 12%;
                text-align: center;
                padding-top: 12px;
            }
            .content{
                float: left;
                width: 70%;
                p{
                    padding: 10px 0;
                }
                .item{
                    width: 100%;
                    position: relative;
                    .hover_box{
                        width: 80%;
                        padding: 8px 0;
                        border: 1px solid #fff;
                        padding-left: 5px;
                        /deep/textarea{
                            border: 0;
                            width: 100% !important;
                        }
                        /deep/.el-textarea__inner{
                            width: 100%;
                            padding: 10px 0;
                        }
                    }
                    .item_tool{
                        color: #666;
                        position: absolute;
                        right: 10%;
                        top: 0;
                        height: 35px;
                        line-height: 35px;
                        display: none;
                    }
                }
            }
            .foot_tool{
                margin-top: 15px;
                border-top: 1px solid #dfe4e6;
                background: #FAFAFA;
                padding: 10px 0;
                .mustchecked{
                    padding: 10px 5px;
                }
                .head_ul,.item_ul{
                    li {
                        list-style: none;
                        float: left;
                        padding: 5px;
                        .sm_icon{
                            font-size: 20px;
                            color: #999;
                            margin:0 5px;
                        }
                        .border{
                            border: 1px solid #999;
                            border-radius: 50%;
                            font-size: 12px;
                            padding: 2px;
                        }
                    }
                }
                .add_single{
                    color: #409EFF;
                    font-size: 14px;
                    padding: 5px;
                }
            }
            &:after{
                clear:both;
                display: block;
                content: '';
            }
        }
    }
    &:after{
        clear: both;
        content: '';
        display: block;
    }
}
</style>
